<template>
    <div class="positionR">
        <div class="appAlert" style="display: none">
            <div class="down-black" @click="hiddenBlackTxt()"></div>
            <div class="black_txt" @click="hiddenBlackTxt()">
                <img :src="staticImageUrl('/images/jiantou.png')" style="z-index: 10">
                <p style="color: #fff;padding: 15px;font-size: 20px">点击右上角，在浏览器中打开</p>
            </div>
        </div>
        <div class="container-fluid nopadding" id="J_container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="bg_app">
                        <div class="app_judge">
                            <div class="logo col-xs-6 col-xs-offset-3">
                                <img class="img-responsive"
                                     :src="staticImageUrl('/images/app_download_logo.png')">
                            </div>
                            <div class="col-xs-12 text-center">
                                <span>好看好玩</span> <br>
                            </div>
                            <div class="col-xs-6 col-xs-offset-3 btn">
                                <input id="judge" class="judge" value="立即体验" type="submit" @click="toDownload">
                                <p class="text-center padding20px " style="font-size: .12rem;" v-if="isAndroid">
                                    无法下载?<a href="https://download.haokanhaowan.cn/android/好看好玩.apk" download="好看好玩">点这里</a>
                                </p>
                                <!--<a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.yibaotong.zhubaoyi" class="judge">DOWNLOAD</a> -->
                            </div>
                            <div class="col-xs-12">
                                <img class="col-xs-12 img-responsive"
                                     :src="staticImageUrl('/images/service_bonus.png')"
                                     style="padding:15px 25%"/>
                                <span style="display:block; margin-top:5px; color:blue; font-weight:700; font-size:14px; text-align:center">亲，在微信中长按二维码</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DownApp",
        mounted(){
            this.toDownload();
        },
        methods:{
            toDownload() {
                var u = navigator.userAgent, app = navigator.appVersion;
                if (this.isAndroid) {
                    window.location.href = process.env.ANDROID_HKHW_URL_SCHEMES ;
                    if(this.v_is_weixin || this.v_is_qq){
                        /*判断是否可以打开app,如果不行直接下载好看好玩*/
                        setTimeout(()=>{
                            $('.appAlert').show();
                            // document.location = "https://a.app.qq.com/o/simple.jsp?pkgname=com.yibaotong.nvwa";
                            // document.location = "https://download.haokanhaowan.cn/android/好看好玩.apk";
                        },2000)
                    }else{
                        setTimeout(()=>{
                            let url = 'https://download.haokanhaowan.cn/android/好看好玩.apk'
                            document.location = url;
                            // /*无法下载的情况*/
                            // const downloadRes = async (url, name) => {
                            //     let response = await fetch(url)
                            //     // 内容转变成blob地址
                            //     let blob = await response.blob()
                            //     // 创建隐藏的可下载链接
                            //     let objectUrl = window.URL.createObjectURL(blob)
                            //     let a = document.createElement('a')
                            //     //地址
                            //     a.href = objectUrl
                            //     //修改文件名
                            //     a.download = name
                            //     // 触发点击
                            //     document.getElementById('downLoad').appendChild(a)
                            //     a.click()
                            //     //移除
                            //     setTimeout(() => document.getElementById('downLoad').removeChild(a), 1000)
                            // }
                            // downloadRes()
                        },2000)
                    }
                } else if (this.isIphone) {
                    /*直接去appStore里面打开好看好玩*/
                    document.location = "https://apps.apple.com/cn/app/%E5%A5%BD%E7%9C%8B%E5%A5%BD%E7%8E%A9/id1467721115";
                }
            },
            hiddenBlackTxt(){
                $('.black_txt,.down-black').hide()
            }
        }
    }
</script>

<style scoped lang="scss">
    @import url($css_root + 'css/bootstrap.min.css');
    .bg_app{
        height:100vh;
        overflow: hidden;
        /*background:url(../image/bg.jpg) no-repeat;*/
    }
    .app_judge .logo{
        text-align:center;
        margin-top:30px;
        margin-bottom:20px;
    }
    .app_judge .logo img{
        width:80%;
        margin-left:10%;
    }

    .app_judge .text-center span{
        font-size:16px;
        font-weight:bold;
        height:24px;
        line-height:24px;
    }
    .app_judge .btn{
        margin-top:10px;
    }
    .app_judge .btn .judge{
        width: 130px;
        height: 45px;
        line-height: 45px;
        font-size: 16px;
        text-align: center;
        border: 2px solid #000;
        border-radius: 34px;
        background: #fbfbfb;
        color: #333;
        font-weight: bold;
        display: inline-block;
    }
    .col-lg-12 {
        padding: 0 !important;
        margin: 0 !important;
    }
    .hongbao{
        margin:20px auto;
        font-weight:bold;
        text-align:center;

    }
    #back{
        background: #000000;
        opacity: 0.8;
        position:fixed;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        filter:alpha(opacity=80);
        z-index:200;
        display:none;}
    #back img{
        position:fixed;top:20px;right:30px; width:20%;
    }
    #back p{
        float:right;
        font-size:20px;
        color:#fff;
        padding-top:70px;
        padding-right:100px;
    }
    .down-black{
        width: 100%;
        height:100vh;
        background: #000;
        opacity: 0.5;
        position: absolute;
        top: 0;
        z-index: 9;
    }
    .black_txt{
        width:100%;
        text-align:right;
        position: absolute;
        right: 8%;
        z-index: 10;
    }
</style>